<template>
	<view class="page">
		<!-- <view v-if="!loading" class="tui-banner-bg">
			<view class="tui-primary-bg tui-route-left"></view>
			<view class="tui-primary-bg tui-route-right"></view>
		
			<view class="tui-banner-box">
				<view class="tui-banner-box-header">
					<view class="header-left"></view>
					<view @click="handleShowRules">说明</view>
				</view>
				<view class="banner-list">
					<view v-for="(item, index) in (userSign.signInSettingVo && userSign.signInSettingVo.signInCycle) || 7" :key="index" class="banner-list-item">
						<image v-if="index + 1 <= userSign.continuousNum" src="/static/icons/redative.png" mode=""></image>
						<image v-else src="/static/icons/redagray.png" mode=""></image>
						<view :class="index + 1 <= userSign.continuousNum ? 'active' : ''" class="banner-list-item-title">
							{{ index + 1 == userSign.continuousNum && userSign.isToday ? '今天' : '第' + (index + 1) + '天' }}
						</view>
					</view>
				</view>
				<view v-if="!userSign.isToday" @click="signModal = true" class="tui-banner-box-button huxi">立即签到</view>
				<view v-else class="tui-banner-box-button disabled">今日已签到</view>
			</view>
		</view> -->
		<Loading class="fix-center" type="img" v-if="loading"></Loading>
		<view v-if="growUpTaskList.length" class="more-top">
			<view :class="current == 0 ? 'pink' : ''" class="more-top-title">成长任务</view>
			<view @click="handleNav(0)" class="more-top-more">
				更多
				<lion-icon name="arrowright" :size="38" unit="rpx" color="#555"></lion-icon>
			</view>
		</view>
		<view v-if="growUpTaskList.length" class="list">
			<TaskItem
				style="margin-bottom: 20upx;"
				@signin="handleRefresh"
				@receive="handleRefresh"
				v-for="(item, index) in growUpTaskList"
				type="growup"
				:key="item.id"
				:item="item"
			></TaskItem>
		</view>
		<view v-if="everyDayTaskList.length" class="more-top">
			<view :class="current == 0 ? 'pink' : ''" class="more-top-title">
				<!-- <view class="more-top-color"></view> -->
				每日任务
			</view>
			<view @click="handleNav(1)" class="more-top-more">
				更多
				<lion-icon name="arrowright" :size="38" unit="rpx" color="#555"></lion-icon>
			</view>
		</view>
		<view v-if="everyDayTaskList.length" class="list">
			<TaskItem
				style="margin-bottom: 20upx;"
				@signin="handleRefresh"
				@receive="handleRefresh"
				v-for="(item, index) in everyDayTaskList"
				:item="item"
				type="everyday"
				:key="item.id"
			></TaskItem>
		</view>
		<view v-if="timeLimitTaskList.length" class="more-top">
			<view :class="current == 0 ? 'pink' : ''" class="more-top-title">
				<!-- <view class="more-top-color"></view> -->
				限时任务
			</view>
			<view @click="handleNav(2)" class="more-top-more">
				更多
				<lion-icon name="arrowright" :size="38" unit="rpx" color="#555"></lion-icon>
			</view>
		</view>
		<view v-if="timeLimitTaskList.length" class="list">
			<TaskItem
				style="margin-bottom: 20upx;"
				@signin="handleRefresh"
				@receive="handleRefresh"
				v-for="(item, index) in timeLimitTaskList"
				:item="item"
				:key="item.id"
				type="timeLimit"
			></TaskItem>
		</view>
		<tui-modal
			:show="ruleModel"
			@click="ruleModel = false"
			:button="button"
			title="规则说明"
			:content="(userSign.signInSettingVo && userSign.signInSettingVo.signInRule) || ''"
		></tui-modal>
		<tui-modal @cancel="awardShow = false" backgroundColor="rgba(0, 0, 0, 0)" :show="awardShow" :custom="true">
			<view class="modal-content">
				<image src="/static/icons/159525531287971473.png" mode=""></image>
				<view class="title">领取奖励</view>
				<view class="desc">{{ awardContent }}</view>
				<view @click="awardShow = false" class="button">开心收下</view>
			</view>
		</tui-modal>
		<tui-modal :show="signModal" @click="handleSign" @cancel="signModal = false" title="提示" content="观看完视频即可完成签到"></tui-modal>
	</view>
</template>

<script>
import TaskItem from '@/components/views/TaskItem.vue';
import {
	getUserBehaviorRecord,
	addVideoBehavior,
	receiveAward,
	signIn,
	getGrowUpTaskListPage,
	getEveryDayTaskListPage,
	getTimeLimitTaskListPage,
	getUserSignRecord
} from '@/service/task.js';
import utils from '@/utils/time.js';
export default {
	components: {
		TaskItem
	},

	data() {
		return {
			current: 1,
			signModal: false,
			everyDayTaskListParams: { pageNum: 1, pageSize: 5 },

			loading: true,
			userSign: { continuousNum: 0, signInPeriod: '', signInSettingVo: { signInCycle: 7, signInRule: '' } },
			isSign: false,
			everyDayTaskList: [],
			timeLimitTaskList: [],
			growUpTaskList: [],
			ruleModel: false,
			userRecord: {},
			button: [
				{
					text: '确定',
					type: 'primary',
					plain: false //是否空心
				}
			],
			awardContent: '',
			awardShow: false,
			growUpTaskListParams: { pageNum: 1, pageSize: 5 },
			timeLimitTaskListParams: { pageNum: 1, pageSize: 5 }
		};
	},
	onLoad() {
		this.handleRefresh();
	},

	// onReady() {
	// 	this.$loadInterstitialAd();
	// },
	onPullDownRefresh() {
		// this.getUserBehaviorRecord();
		// this.getUserSignRecord();
		// this.handleGetLists();
		this.handleRefresh();
		setTimeout(v => {
			uni.stopPullDownRefresh();
			this.loading = false;
		}, 1000);
	},
	methods: {
		handleSign({ index }) {
			this.signModal = false;
			if (index == 0) {
				return;
			}
			this.$loadRewardVideoAd(this.onSignIn, false, true);
		},
		async handleRefresh(item) {
			if (item && item.taskAwardDescription) {
				this.awardContent = item.taskAwardDescription;
				this.awardShow = true;
			}
			this.getUserSignRecord();
			await this.getUserBehaviorRecord();
			this.$nextTick(() => {
				this.handleGetLists();
			});
		},
		handleGetLists() {
			this.loading = true;
			this.getEveryDayTaskListPage();
			this.getGrowUpTaskListPage();
			this.getTimeLimitTaskListPage();
		},
		handleShowRules() {
			// this.ruleModel = true;
			uni.navigateTo(
				{
					url: '../web/imgTest'
				},
				{
					type: 'groupExplain',
					title: '玩法简介'
				}
			);
		},
		async handleNav(i) {
			uni.navigateTo({
				url: '/pages/mission/list/list?index=' + i
			});
		},
		async getUserBehaviorRecord() {
			const resp = await getUserBehaviorRecord();
			if (resp) {
				this.userRecord = resp;
			}
		},
		async getUserSignRecord() {
			const resp = await getUserSignRecord();
			if (resp) {
				this.userSign = resp;
				this.userSign.isToday = this.userSign.signInPeriod === utils.formatTime(false, 'yyyy-MM-dd');

				if (!this.isYestday(new Date(this.userSign.signInPeriod || '')) && !this.userSign.isToday) {
					this.userSign.continuousNum = 0;
				}
			}
		},
		async onSignIn(e) {
			uni.showLoading();
			try {
				await signIn(e, { loading: true });
				this.$msg('签到成功');
				this.userSign.isToday = true;
				this.handleRefresh();
			} finally {
				uni.hideLoading();
				//TODO handle the exception
			}
		},
		isYestday(theDate) {
			let date = new Date(); //当前时间

			let today = new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime(); //今天凌晨

			let yestday = new Date(today - 24 * 3600 * 1000).getTime();

			return theDate.getTime() < today && yestday <= theDate.getTime();
		},
		async getGrowUpTaskListPage() {
			const resp = await getGrowUpTaskListPage(this.growUpTaskListParams);
			if (resp.data && resp.data.length) {
				this.growUpTaskList = resp.data.map(v => {
					// 判断领奖
					let flag = false;
					if (this.userRecord.all && this.userRecord.all.length) {
						let confirmNum = 0;
						if (v.taskConditionVoList && v.taskConditionVoList.length) {
							v.taskConditionVoList.forEach(v1 => {
								const resp = this.userRecord.all.find(v2 => {
									v[v2.behaviorType] = v2.behaviorNum;
									return v2.behaviorType == v1.conditionType;
								});
								if (resp) {
									if (v1.conditionRequireNum <= resp.behaviorNum) {
										confirmNum++;
									}
								}
							});
							flag = confirmNum == v.taskConditionVoList.length;
						}
					}
					v.canAward = flag;
					return v;
				});
			}
			this.loading = false;
		},
		async getEveryDayTaskListPage() {
			const resp = await getEveryDayTaskListPage(this.everyDayTaskListParams);
			if (resp.data && resp.data.length) {
				this.everyDayTaskList = resp.data.map(v => {
					// 判断领奖
					let flag = false;
					if (this.userRecord.day && this.userRecord.day.length) {
						let confirmNum = 0;
						if (v.taskConditionVoList && v.taskConditionVoList.length) {
							v.taskConditionVoList.forEach(v1 => {
								const resp = this.userRecord.day.find(v2 => {
									v[v2.behaviorType] = v2.behaviorNum;
									return v2.behaviorType == v1.conditionType;
								});
								if (resp) {
									if (v1.conditionRequireNum <= resp.behaviorNum - v1.conditionRequireNum * v.finishCount) {
										confirmNum++;
									}
								}
							});
							flag = confirmNum == v.taskConditionVoList.length;
						}
					}
					v.canAward = flag;
					return v;
				});
			}
			this.loading = false;
		},
		async getTimeLimitTaskListPage() {
			const resp = await getTimeLimitTaskListPage(this.timeLimitTaskListParams);
			if (resp.data && resp.data.length) {
				this.timeLimitTaskList = resp.data.map(v => {
					v.taskPeriodBegin = v.taskPeriodBegin.substr(0, 10);
					v.taskPeriodEnd = v.taskPeriodEnd.substr(0, 10);
					// 判断领奖
					let flag = false;
					if (v.behaviorRecordVos && v.behaviorRecordVos.length) {
						let confirmNum = 0;
						if (v.taskConditionVoList && v.taskConditionVoList.length) {
							v.taskConditionVoList.forEach(v1 => {
								const resp = v.behaviorRecordVos.find(v2 => {
									v[v2.behaviorType] = v2.behaviorNum;
									return v2.behaviorType == v1.conditionType;
								});
								if (resp) {
									if (v1.conditionRequireNum <= resp.behaviorNum) {
										confirmNum++;
									}
								}
							});
							flag = confirmNum == v.taskConditionVoList.length;
						}
					}
					v.canAward = flag;
					return v;
				});
			}
			this.loading = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.page {
	min-height: 100vh;
	padding-bottom: 20upx;
	background: #eeeeee;
}
.tui-banner-bg {
	display: flex;
	height: 180rpx;
	margin-bottom: 220upx;
	background-color: #14b2ff;
	position: relative;
}

.tui-primary-bg {
	width: 50%;
	display: inline-block;
	height: 250rpx;
	border: 1px solid transparent;
	position: relative;
	z-index: 1;
	// background-color: $uni-color-primary;
	background: #14b2ff;
}

.tui-route-left {
	transform: skewY(8deg);
}

.tui-route-right {
	transform: skewY(-8deg);
}

.tui-banner-box {
	width: 690upx;
	margin: 0 auto;
	right: 0;
	background-color: #fff;
	min-height: 280upx;
	box-sizing: border-box;
	position: absolute;
	/* overflow: hidden; */
	z-index: 99;
	bottom: -180upx;
	left: 0;
	box-shadow: 0 10px 20px rgba(170, 170, 170, 0.3);
	border-radius: 20rpx;
}
.tui-banner-box-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: $uni-text-color-placeholder;
	font-size: 28upx;
	padding: 20upx 30upx;
}
.tui-banner-box-header .header-left {
	// font-weight: 600;
	color: #3c4e90;
	font-size: 32upx;
}
.tui-banner-box-button {
	position: absolute;
	bottom: -26upx;
	height: 70upx;
	width: 264upx;
	display: flex;
	color: #ffffff;
	left: 0;
	right: 0;
	margin: 0 auto;
	justify-content: center;
	align-items: center;
	border-radius: 80px;
	box-shadow: 0 10px 20px rgba(85, 85, 255, 0.3);
	background: #0eadff;
}
.huxi {
	-webkit-animation: breathe 0.5s infinite;
	animation: breathe 0.5s infinite;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
}
@keyframes breathe {
	0% {
		-webkit-transform: scale(0.9);
		transform: scale(0.9);
	}
	50% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	100% {
		-webkit-transform: scale(0.9);
		transform: scale(0.9);
	}
}
.banner-list {
	display: flex;
	justify-content: space-evenly;
	.banner-list-item {
		display: flex;
		// padding: 0 12upx;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		image {
			height: 74upx;
			width: 60upx;
		}
		&-title {
			font-size: 28upx;
			margin-top: 10upx;
			color: #c2c6ca;
		}
	}
	.active {
		color: #ff4864;
		font-size: 30upx;
		// font-weight: 600;
	}
}

.more-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20upx 30upx;
}
.more-top-title {
	display: flex;
	align-items: center;
	font-size: 32upx;
	font-weight: 600;
	color: #313131;
}
.more-top-color {
	width: 8upx;
	background: #afdbff;
	border-radius: 20upx;
	height: 30upx;
	margin-right: 10upx;
}
.more-top-more {
	display: flex;
	align-items: center;
	font-size: 26upx;
	// color: $uni-text-color-placeholder;
}
.list {
	&-item {
		width: 660upx;
		margin: 0 auto;
		background: #fff;
		border-radius: 20upx;
		padding: 30upx 0 30upx 30upx;
		display: flex;
		&-left {
			// width: 500upx;
			flex: 1;
			.one {
				font-size: 34upx;
				font-weight: 600;
				color: $uni-text-color;
			}

			.two,
			.three {
				margin-top: 10upx;
				font-size: 28upx;
				color: $uni-text-color-grey;
			}
		}

		&-right {
			width: 160upx;
			&-tip {
				margin-top: 16upx;
				font-size: 28upx;
				color: $uni-text-color-grey;
			}

			&-button {
				position: relative;
				margin-top: 20upx;
				border-radius: 44px;
				box-shadow: 0 10px 20px rgba(85, 85, 255, 0.1);
				background: $gradient-bg;
				color: #fff;
				font-size: 22upx;
				width: 120upx;
				text-align: center;
				line-height: 50upx;
				height: 50upx;
			}
		}
	}
}
.disabled {
	// background: linear-gradient(to right, #a6b0d4, #879bb0);
	// border: 2upx solid #c1defd;
	color: #eaeaea;
	// background: #c1defd;
	box-shadow: 0 10px 20px #c1defd;
}
.fix-center {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.tui-menu-item {
	width: 100%;
	padding: 16rpx 10rpx;
	box-sizing: border-box;
}
.modal-content {
	position: relative;
	image {
		position: relative;
		left: -82upx;
		width: 684upx;
		bottom: 40upx;
		height: 742upx;
	}
	.button {
		position: absolute;
		top: 564upx;
		z-index: 1;
		width: 228upx;
		line-height: 62upx;
		text-align: center;
		background: linear-gradient(to right, #fbdd7d, #fdeaea);
		height: 62upx;
		border-radius: 40upx;
		left: 0;
		text-align: center;
		right: 0;
		margin: 0 auto;
		color: #ca0000;
		font-weight: 500;
		font-size: 30upx;
	}
	.title {
		position: absolute;
		top: 170upx;
		z-index: 1;
		left: 0;
		text-align: center;
		right: 0;
		margin: 0 auto;
		color: #fff;
		font-size: 48upx;
	}

	.desc {
		position: absolute;
		top: 310upx;
		width: 400upx;
		z-index: 1;
		left: 0;
		text-align: center;
		right: 0;
		margin: 0 auto;
		color: #fff;
		font-size: 60upx;
	}
}
</style>
